<template>
     <!-- 返回栏 -->
     
    <div class='fm'>
        <van-nav-bar
        left-text="私人Fm"
        right-text="更多"
        left-arrow
        @click-left="onClickLeft"
    />
    <!-- 列表 -->
    <div class="box">
      <div class="cont" v-for="item in data" :key="item.id" >
          <img :src="item.album.picUrl" alt="">
        <div class="song">
          <p class="name">{{item.name}}</p>
          
          <p class="msg">
            <span class="singer" v-for="s in item.artists" :key="s.id">{{s.name}} </span>
            <span class="album">- {{item.album.name}}</span>
          </p>
        </div>
       
      </div>
    </div>
    

    </div>
</template>

<script>
import {fmAPI} from "../../api/home"
export default {
    
    data() {
        
        return {
            data:[],
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        onClickLeft(){
            this.$router.go("-1")
        },
        //获取私人fm
       async initFm(){
            const res = await fmAPI();
            console.log("122",res)
            this.data = res.data.data
        }
    },
    created() {
        this.initFm()
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
 .cont {
  border-top: 1px solid #ccc;

  width: 330px;
  height: 42px;
  padding: 15px 0;
  display: flex;
  margin: 0 15px;
}
.cont img{
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 10px;
}
.song {
  width: 264px;
}
.name {
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 5px;
}
.msg {
  font-weight: 100;
  font-size: 13px;
}
.play {
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>